<!-- 喵豆不足弹窗 -->
<!-- XXX 已弃用，考虑删除 -->
<template>
  <with-mask :is-show="true">
    <div class="container">
      <!-- 头像 -->
      <div class=" avatar">
        <image
          class="avatar-img"
          :src="userInfo.avatar"
          mode="aspectFill"
          alt=""
        />
      </div>
      <!-- 喵豆不足信息 -->
      <div class="not-enough-info">
        <!-- 标题 -->
        <div class="title">
          <text class="title-text">
            哎呀，喵豆不足
          </text>
        </div>
        <!-- 说明 -->
        <div class="statement">
          <text class="statement-text">
            距离一次抽奖还差：<text class="miaodou-num">
              {{ 500 - miaodouStatus.availableMiaodou
              }}
            </text>喵豆，邀请{{ Math.ceil((500 - miaodouStatus.availableMiaodou) / 50) }}名好友就能抽奖了
          </text>
        </div>
        <!-- 去赚积分按钮 -->
        <div
          class="to-earn-points-btn"
          @click="toGetMiaodou"
        >
          去赚喵豆
        </div>
      </div>
      <!-- 关闭按钮 -->
      <div
        class="close-btn"
        @click="changePopupType('no')"
      >
        <image
          class="close-btn-img"
          src="@/static/icons/common/close.png"
          alt=""
        />
      </div>
    </div>
  </with-mask>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useUser } from '@/stores/user';
import { useLottery } from '../../stores/lottery';

const user = useUser();

const { miaodouStatus, userInfo } = storeToRefs(user);
const { changePopupType } = useLottery();

/** 跳转到「领喵豆」页面 */
const toGetMiaodou = () => {
  uni.navigateTo({ url: '/subpkg/get-miaodou/get-miaodou' });
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;

  display: grid;
  grid-template:
    "notEnoughInfo" 1fr
    "closeBtn" 48px;
  row-gap: 20px;
  justify-items: center;

  // 头像
  .avatar {
    position: absolute;
    top: -8.9744vw;
    left: 50%;

    width: 72px;
    height: 72px;
    overflow: hidden;

    border: 2.17px solid #fff;
    border-radius: 50%;

    transform: translateX(-50%);

    .avatar-img {
      width: 100%;
      height: 100%;
    }
  }

  // 喵豆不足信息
  .not-enough-info {
    grid-area: notEnoughInfo;

    width: calc(73.8462vw - 24px);

    background: linear-gradient(180deg, #faf1e2, #f5e0c9 100%);
    border: 1px solid #fff;
    border-radius: 16px;

    display: grid;

    // XXX 需要改成一列，但现在时间太紧，就暂时这样
    grid-template:
      ". ." 53px
      "title title" 7.9487vw
      ". ." 49px
      "statement statement" 48px
      ". ." 73px
      "toEarnPointsBtn toEarnPointsBtn" auto
      ". ." 24px
      / 1fr 1fr;
    justify-items: center;

    // 标题
    .title {
      grid-area: title;
      align-self: self-start;

      position: relative;
      z-index: 1;

      width: 39.4872vw;
      height: 7.9487vw;

      line-height: 7.9487vw;
      text-align: center;

      // 标题文字
      .title-text {
        font-size: 22px;
        font-weight: 500;
        color: #743920;
      }
    }

    // 说明
    .statement {
      grid-area: statement;

      width: 60vw;

      font-size: 4.359vw;
      color: #743920;

      // 喵豆数量
      .miaodou-num {
        color: #ff2459;
      }
    }

    // 领取按钮
    .to-earn-points-btn {
      grid-area: toEarnPointsBtn;

      width: 53.3333vw;
      height: 12.3077vw;

      background: linear-gradient(103deg,
      #ff825e 0%,
      #ff6c87 100%,
      #f24ebd 100%);
      border-radius: 11.7949vw;

      font-size: 4.359vw;
      line-height: 12.3077vw;
      color: #fff;
      text-align: center;
    }
  }

  // 关闭按钮
  .close-btn {
    grid-area: closeBtn;

    width: 47px;
    height: 47px;

    .close-btn-img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
